<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <ul :class="isShow ? 'goods1' : 'goods2'">
        <li
          class="van-hairline--surround"
          v-for="(item, index) in data"
          :key="index"
        >
          <img :src="item.img1" alt="" />
          <div>
            <h4>{{ item.proname }}</h4>
            <p class="money">￥{{ item.originprice }}</p>
          </div>
        </li>
        <div class="toggle" @click="isShow = !isShow">
          <van-icon name="apps-o" v-if="isShow" />
          <van-icon name="bars" v-if="!isShow" />
        </div>
      </ul>
    </van-list>
  </div>
</template>

<script>
import myAxios from "../../utils/request";
import Vue from "vue";
import { Icon, List } from "vant";
Vue.use(List);
Vue.use(Icon);
export default {
  data() {
    return {
      isShow: true,
      data: [],
      loading: false,
      finished: false,
      count: 2,
    };
  },
  created() {
    myAxios.get("/pro/list").then((data) => {
      console.log(data.data.data);
      this.data = data.data.data;
    });
  },
  methods: {
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        myAxios
          .get("/pro/list", { params: { count: this.count, limitNum: 10 } })
          .then((data) => {
            this.loading = false;
            if (data.data.data.length == 0) {
              this.finished = true;
            } else {
              this.data = [...this.data, ...data.data.data]; //this.data会越来越多
              // this.data=原来的数据+新加载的数据
              this.count++;
            }
          });
      }, 1000);
    },
  },
};
</script>

<style scoped>
.goods1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* position: relative; */
}
.goods1 li {
  width: 48%;
}
.goods1 li img {
  width: 100%;
}
/* .goods2{
  position: relative;
} */
.goods2 li {
  display: flex;
}
.goods2 li img {
  width: 30%;
}
.goods2 li div {
  flex: 1;
}
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.money {
  color: red;
}
</style>